
/* 
    如果只修改对象的属性，就是单单改变属性，vue会对该对象进行代理
        这种操作只会影响对象自身，不会导致元素的重新渲染

    希望改变属性的同时，可以进行触发元素的重新渲染

    要实现这个目的，必须要对对象进行改造，vue3中使用的是代理模式来完成对象的改造
    
    设置代理时不会对原对象产生影响
*/

// obj.name = "猪八戒"


// 创建一个对象
const obj = {
    name:"孙悟空",
    age:18
}
// 来为对象创建一个代理
const handler = {
    //handler  用来指定代理行为

    // get()用来指定读取数据时的行为，他的返回值就是最终读取到的值
    // 指定get后，在通过代理读取对象属性时，就会调用get方法来获取值
    get(target,prop,receiver){

        // 返回值之前做一些操作
        // 在vue中data()返回对象会被vue所代理
        // vue代理后，当我们通过代理去读取属性是=时，返回值之前，他会做出一个跟踪的操作
        //      当我们通过代理去修改属性时，修改后，会通知之前所用到该值的位置进行更新
        // track()追踪谁用了这个属性
        /* 
            三个参数：
                target 被代理的对象
                prop 读取的属性值
                receiver 代理对象
        */

        return target[prop]
    },
    
    //set会在通过代理修改对象时调用 
    set(target,prop,value,receiver){
        target[prop] = value

        // trigger() 触发所有使用该值的位置进行更新
        // 值修改之后做一些其他的操作
    }

}  
// 创建代理
const proxy = new Proxy(obj, handler)

// 修改代理的属性
proxy.age = 28

console.log(proxy.age);
